<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!--<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>-->
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
</head>
<body>
    <h1 id="search">开始录音</h1>
    <h1 id="shareqq">分享QQ2</h1>
    <script>
        $(function () {

        console.log('页面js加载')
        /*
        1、配置js安全域名接口
        2、http://res.wx.qq.com/open/js/jweixin-1.4.0.js
        3、通过config接口注入权限验证配置
         */
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxd335c2c3f43d7194', // 必填，公众号的唯一标识
            timestamp:'<% timestamp %>' , // 必填，生成签名的时间戳  这里<%%>是ejs的模板引擎 但是必须加上 ‘’ ，要不然这里就不会ejs解析，加上‘’后变成字符串 ejs就会解析
            nonceStr: '<% noncestr %>', // 必填，生成签名的随机串
            signature: '<% signature %>',// 必填，签名
            jsApiList: [
                'onMenuShareTimeline',//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                'onMenuShareQQ',
                'onMenuShareQZone',
                'startRecord',  //开始录音
                'stopRecord', //结束录音
                'translateVoice', //翻译语音
                'updateAppMessageShareData'
            ] // 必填，需要使用的JS接口列表
        });

        //当你的 config成功后 会触发 read ，失败触发error,所以你是用微信的那些接口，都放在read里面
        wx.ready(function(){
            console.log('jsapi 认证成功')
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
            // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
            // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            // 判断当前客户端版本是否支持指定JS接口 测试的时候使用。
            /*wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline',//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                    'onMenuShareQQ',
                    'onMenuShareQZone',
                    'startRecord',  //开始录音
                    'stopRecord', //结束录音
                    'translateVoice',], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res)
                }
            });*/

            /*
            语音识别功能
             */
            //设置标志位 ，是否录音中
            let isRecord=false;
            //tap 就是点击事件
            //langtap 只能三秒
            $('#search').on('click',function () {
                console.log('click search btn')
                if(!isRecord){
                    //开始录音
                    wx.startRecord({
                        success:()=>{

                        }
                    })
                    isRecord=true;
                    $(this).html('停止录音')
                }else{

                    //模拟语音识别结果
                    // 在douban 搜索电影结果
                    //https://api.douban.com/v2/movie/search?q=西虹市首富   || tag='喜剧'  || start  count
                    /*{
                        "msg": "invalid_apikey",
                        "code": 104,
                        "request": "GET /v2/movie/search"
                    }*/
                    isRecord=false;
                    $(this).html('开始录音')
                    const url='https://api.douban.com/v2/movie/search?callback=?&q=西虹市首富';
                    $.getJSON(url,function (data) {
                        alert(data)
                    })
                    /*$.ajax({
                        type: "GET",
                        url:url,
                        dataTypeString:'jsonp',
                        success:function (data) {
                            console.log('success');
                            console.log(data)
                        },
                        error:function (err) {
                            console.log('error');
                            console.log(err)
                        }
                    })*/


                    // 结束录音
                    /*wx.stopRecord({
                        // 结束录音，会把语音上传到微信服务器，微信服务器给你一个id，根据这个id找到文件
                        success:function (res){
                            var localId=res.localId
                            isRecord=false;
                            $(this).html('开始录音')
                            //识别语音
                            // 现在语音识别，需要权限开启，暂时没法用
                            wx.translateVoice({
                                localId, // 需要识别的音频的本地Id，由录音相关接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    alert(res.translateResult); // 语音识别的结果
                                }
                            });
                        }
                    })*/
                }
            })


            /*
             分享接口
             */
            $('#shareqq').on('click',function () {
                console.log(wx.updateAppMessageShareData)
                wx.updateAppMessageShareData({
                    title: '分享的标题测试', // 分享标题
                    desc: '分享描述', // 分享描述
                    link: 'http://www.sdfyxh.com/', // 分享链接
                    imgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/PWy9v7bJ595vRX8Lib5sGnKXpJxn47xbLsUukvATL5o5W4ERxIiaBD9e85xmhRQbaS12WDKeicH8EgS6qrhib8zPjg/0', // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        alert('分享成功')
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        alert('分享失败')
                    }
                });
            })
        });
        // 验证失败，可以返回404 或者错误信息
        wx.error(function(res){
            console.log('jsapi 认证失败')
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        })
    </script>
</body>
</html>